<template>
  <main>
    <TopNav :title="metaTitle" />
    <PersonInfo :person="person" v-if="person" />
    <MediaNav :menu="menu" @clicked="navClicked" />

    <template v-if="activeMenu === 'known-for'">
      <Listing v-if="knownFor && knownFor.results.length" :items="knownFor" />
    </template>
    <template v-if="activeMenu === 'credits'">
      <CreditsHistory :credits="person.combined_credits" />
    </template>
    <template v-if="activeMenu === 'photos' && showImages">
      <Images
        v-if="person && person.images.profiles.length"
        title="Photos"
        type="poster"
        :images="person.images.profiles" />
    </template>
  </main>
</template>
<script setup>
import TopNav from "@/components/TopNav.vue";
import MediaNav from "@/components/MediaNav.vue";
import Listing from "@/components/Listing.vue";
import CreditsHistory from "@/components/CreditsHistory.vue"
import PersonInfo from "@/components/PersonInfo.vue";
import Images from "@/components/Images.vue";
import { ref, computed } from "vue";
import { getPerson } from "@/api";
import { useRoute } from "vue-router";

const person = ref(null);
const activeMenu = ref("known-for");
const knownFor = ref(null);

const route = useRoute();

const metaTitle = computed(() => {
  return person.value?.name;
});

const showImages = computed(() => {
  const images = person.value?.images;
  return images && images.profiles && images.profiles.length;
});

const menu = computed(() => {
  const menu = ["Known For", "Credits"];
  if (showImages.value) {
    menu.push("Photos");
  }
  return menu;
});

const navClicked = (item) => {
  activeMenu.value = item;
};

getPerson(route.params.id).then((res) => {
  if (res.adult) {
    console.error({ message: "This person is not available" });
  } else {
    person.value = res;
    initKnownFor();
  }
});

const initKnownFor = () => {
  if (knownFor.value !== null) return;
  const department = person.value.known_for_department;
  let results;

  if (department === "Acting") {
    results = person.value.combined_credits.cast;
  } else if (department === "Directing") {
    results = person.value.combined_credits.crew.filter(
      (item) => item.department === "Directing"
    );
  } else if (department === "Production") {
    results = person.value.combined_credits.crew.filter(
      (item) => item.department === "Production"
    );
  } else if (department === "Writing" || department === "Creator") {
    results = person.value.combined_credits.crew.filter(
      (item) => item.department === "Writing"
    );
  }
  if (!results) return;

  //删除重复项
  results = removeDuplicates(results);

  results = results.filter((item) => !item.adult);

  results.sort((a, b) => (a.vote_count > b.vote_count ? -1 : 1));
  knownFor.value = {
    page: 1,
    total_pages: 1,
    total_results: results.length,
    results,
  };
};

const removeDuplicates = (myArr) => {
  return myArr.filter((obj, pos, arr) => {
    const prop = obj.title ? "title" : "name";
    return arr.map((mapObj) => mapObj[prop]).indexOf(obj[prop]) === pos;
  });
};
</script>
